<template>
  <div style="height: 500px">
    <div class="search-box">
      <span>搜索关键词:</span>
      <input type="text" v-model="keyword" @keydown.enter="filter" />
    </div>
    <vue3-tree-org
      ref="tree"
      :data="data"
      center
      :collapsable="true"
      :horizontal="false"
      :disabled="true"
      :default-expand-level="1"
      :filter-node-method="filterNodeMethod"
      :label-style="style"
      :node-draggable="false"
      :node-copy="(node) => copy(node.label + node.phone)"
    >
      <template v-slot="{ node }">
        <div class="tree-org-node__text node-label">
          <div class="custom-content">{{ node.label }}</div>
          <div>{{ '电话:' + node.$$data.phone }}</div>
        </div>
      </template>
    </vue3-tree-org>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { useClipboard, usePermission } from '@vueuse/core';
  const { text, isSupported, copy } = useClipboard();
  export default defineComponent({
    components: {},
    setup() {
      const keyword = ref<string>('');
      const tree = ref<any>(null);
      const data = {
        id: 1,
        phone: '1112123',
        label: 'xxx科技有限公司',
        children: [
          {
            id: 2,
            pid: 1,
            phone: '43423423',
            label: '产品研发部',
            style: { color: '#fff', background: '#108ffe' },
            children: [
              { id: 6, pid: 2, phone: '1112123', label: '禁止编辑节点', disabled: true },
              { id: 8, pid: 2, phone: '1112123', label: '禁止拖拽节点', noDragging: true },
              { id: 10, pid: 2, phone: '1112123', label: '测试' },
            ],
          },
          {
            id: 3,
            pid: 1,
            phone: '08984324',
            label: '客服部',
            children: [
              { id: 11, pid: 3, phone: '1112123', label: '客服一部' },
              { id: 12, pid: 3, phone: '1112123', label: '客服二部' },
            ],
          },
          { id: 4, phone: '346453423', pid: 1, label: '业务部' },
        ],
      };
      const style = {
        background: '#fff',
        color: '#5e6d82',
      };
      function filter() {
        tree.value.filter(keyword.value);
      }
      function filterNodeMethod(value: any, data: any) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
      return { tree, data, style, keyword, filterNodeMethod, filter, copy };
    },
  });
</script>

<style scoped>
  .search-box {
    padding: 8px 15px;
    input {
      width: 200px;
      height: 32px;
      border: 1px solid #ddd;
      outline: none;
      border-radius: 5px;
      padding-left: 10px;
    }
  }
  .tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
      padding-bottom: 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid currentColor;
    }
  }
</style>
